<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebComponent测试练习</title>

    <style>
            .test-h1{
                background-color: blueviolet;
            }
    </style>
</head>
<body>
    <div>123</div>
    <test>654</test>
    <h1 class="test-h1">外部标题</h1>
    <!-- 1.  WebComponent标准：Custom Element -->
    <my-count></my-count>

    <!-- HTML5的网页模板，也可以使用document.document.createElement('template')创建 -->
    <template id="my-count-temp">
        <div>
            <h1 class="test-h1">Hello WebComponent</h1>
            <ul>
                <li></li>
            </ul>
        </div>

        <style>
            .test-h1{
                color: red;
            }
        </style>
    </template>
    <script>
        //2. WebComponent标准：CustomElement类型
        class MyCount extends HTMLElement{
            constructor(){
                super()
                var count=0;
                //获取html中的template元素，是一个HTMLTemplateElement类型
                var template=document.querySelector("#my-count-temp")
                console.log(template);
                console.log(template.content);

                //3. WebComponent标准：ShadowDOM对象
                var shadow=this.attachShadow({mode:'closed'})

                //4. H5的新特性，可以从template中直接获取一个DocumentFragment对象
                var orignNode=template.content
            
                // 从template中克隆一个副本
                var cloneNode=document.importNode(orignNode,true)
                // 查询到li
                let li=cloneNode.querySelectorAll("li")[0];
                li.textContent=count
                //游离的节点追加到shadowDOM中
                shadow.appendChild(cloneNode)
                //定时的更新showDOM，将会自动的合并到DOMTree中
                setInterval(()=>{
                    count++
                    li.textContent=count
                },1000)
            }
        }
        //利用全局的CustomElementRegistry对象，注册CustomElement      
        window.customElements.define('my-count',MyCount)
    </script>
</body>
</html>
